<template>
  <el-dialog v-el-drag-dialog="{ drag: true, full: true, resize: true }" title="顶班驾驶员设置" width="30%"
    :close-on-click-modal="false" :visible.sync="md.state" @close="closeMd" v-if="md.state">
    <el-form :model="fm.ps" ref="formRef" :label-width="'100px'">

      <el-form-item label="顶班驾驶员">
        <el-select clearable filterable style="width: 100%" v-model="fm.ps.selinaDriver" placeholder="请选择顶班驾驶员">
          <el-option v-for="item in driverOptions" :key="item.uname" :label="item.realName"
            :value="item.uname"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="顶班时间">
        <el-date-picker style="width: 100%" clearable :disabled="true" v-model="fm.ps.time" type="datetimerange"
          range-separator="至" value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始时间" end-placeholder="结束时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="顶班备注">
        <el-input type="textarea" maxlength="500" clearable show-word-limit :autosize="{ minRows: 3, maxRows: 7 }"
          placeholder="请输入顶班备注" v-model="fm.ps.selinaRemark" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit" :disabled="fm.sb.load">{{ fm.sb.text }}</el-button>
        <el-button @click="closeMd">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog";
import { checkLeave, setLinaDriver } from "@/api/services/personMan.service";
import { getDriverDict } from "@/api/services/common.service";
import moment from "moment";

export default {
  name: "SetDriverType",
  directives: { elDragDialog },
  props: ["state", "datas"],
  components: {},
  data() {
    return {
      leaveStartTime: '',
      leaveEndTime: '',
      md: { state: this.state },
      fm: {
        fname: "addGroupFm",
        ps: {
          id: '',
          time: '',
          selinaDayStart: '',
          selinaDayEnd: '',
          selinaDriver: '', // 顶班驾驶员uname
          selinaRemark: '', // 备注
          state: '1',
        },
        sb: {
          load: false,
          text: "添加",
        },
      },
      loading: false,
      driverOptions: [],
    };
  },
  computed: {
    pickerOptions() {
      let _this = this
      return {
        disabledDate(time) {
          if (!_this.fm.ps.selinaDayStart) return false
          const startTime = moment(_this.leaveStartTime).format('x')
          const endTime = moment(_this.leaveEndTime).format('x')
          return time.getTime() < startTime || time.getTime() > endTime
        }
      }
    }
  },
  created() {
    if (this.datas) {
      const { id, selinaUser, leaveStartTime, leaveEndTime, selinaRemark } = this.datas
      this.fm.ps.id = id
      this.fm.ps.time = [leaveStartTime, leaveEndTime]
      this.fm.ps.selinaDayStart = leaveStartTime
      this.fm.ps.selinaDayEnd = leaveEndTime
      if (selinaUser) {
        this.fm.ps.selinaDriver = selinaUser.uname
      }
      if (selinaRemark) {
        this.fm.ps.selinaRemark = selinaRemark
      }
    }
    this._getDict()
  },
  methods: {
    _getDict() {
      getDriverDict({ containLeave: 1, containMain: 0 }).then(res => {
        this.driverOptions = res.data
      })
    },

    /* 关闭弹框 */
    closeMd() {
      this.$emit("getMdState", false);
    },

    onSubmit() {
      const { id } = this.datas
      const { time, selinaDriver } = this.fm.ps
      let noPass = { id, state: '2', reamrk: '', }
      let pass = { ...this.fm.ps }
      console.log(pass, 'pass')
      if (time && time.length !== 0) {
        pass.selinaDayStart = time[0]
        pass.selinaDayEnd = time[1]
      }
      console.log(!selinaDriver, '!selinaDriver')
      console.log(selinaDriver, 'selinaDriver')
      let params = !selinaDriver ? pass : noPass
      let fetch = !selinaDriver ? checkLeave : setLinaDriver

      this.fm.sb.load = true; // 添加按钮禁用效果
      let loading = this.U.qloading("提交中，请稍后..."); // 添加遮
      fetch(params).then((res) => {
        this.fm.sb.load = false; // 取消按钮禁用效果
        this.U.qclose(loading); // 关闭遮罩
        if (!res || res.code !== 1) {
          this.U.qerror(res.msg);
        } else {
          this.U.qsuccess(res.msg);
          this.closeMd();
          this.$emit("reloadDg");
        }
      }).catch(() => {
        this.U.qclose(loading);
      })
    },
  },
};
</script>
